import React, { useEffect } from 'react';

export default function Particles() {
  useEffect(() => {
    const particlesContainer = document.querySelector('.particles');
    const particleCount = window.innerWidth < 768 ? 30 : 60;
    
    for (let i = 0; i < particleCount; i++) {
      createParticle(particlesContainer);
    }
    
    function createParticle(container) {
      const particle = document.createElement('div');
      particle.className = 'particle';
      
      // 随机大小 (2px - 6px)
      const size = Math.random() * 4 + 2;
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;
      
      // 随机位置
      particle.style.left = `${Math.random() * 100}%`;
      particle.style.top = `${Math.random() * 100}%`;
      
      // 随机动画
      const duration = Math.random() * 20 + 10;
      const delay = Math.random() * 5;
      particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
      
      container.appendChild(particle);
      
      // 浮动动画
      animateParticle(particle);
    }
    
    function animateParticle(particle) {
      let x = parseFloat(particle.style.left);
      let y = parseFloat(particle.style.top);
      let xSpeed = (Math.random() - 0.5) * 0.2;
      let ySpeed = (Math.random() - 0.5) * 0.2;
      
      function move() {
        x += xSpeed;
        y += ySpeed;
        
        // 边界检测
        if (x < 0 || x > 100) xSpeed *= -1;
        if (y < 0 || y > 100) ySpeed *= -1;
        
        particle.style.left = `${x}%`;
        particle.style.top = `${y}%`;
        
        requestAnimationFrame(move);
      }
      
      move();
    }
    
    return () => {
      // 清理粒子
      const particles = document.querySelectorAll('.particle');
      particles.forEach(p => p.remove());
    };
  }, []);
  
  return <div className="particles"></div>;
}